/**
 * by eval .
 */

import React, {Component} from 'react';
import {
  StyleSheet, 
  Text, 
  View,
  Image,
  TouchableOpacity,
  FlatList,
  Animated,
  ActivityIndicator,
  KeyboardAvoidingView,
  Alert,
  ScrollView
} from 'react-native';
import {i18n} from '../../../i18n/index';
import { scaleSize ,deviceHeight,deviceWidth} from '../../../utils/screen';
import FontText,{fontFamily} from '../../components/FontText';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import RadioGroup from '../../components/Radio/index'
import {TabView} from 'react-native-tab-view';
import ProductItem from '../../components/menu/ProductItem';
import CategeryItem from '../../components/menu/CategreryItem'
import { Picker,ActivityIndicator as AntActivityIndicator} from 'antd-mobile-rn';
import PickerItem from '../../components/PickerItem';
import Switch from '../../components/Switch';
import InputItem from '../../components/InputItem';
import * as menuActions from '../actions/menuActions';
import ImagePicker from 'react-native-image-crop-picker';
import {CachedImage} from "react-native-img-cache";
import {Toast} from 'antd-mobile-rn';
import _ from 'lodash';
const i18nName = i18n.t("office.menu.placeholderName"),
  i18nRequired = i18n.t("office.menu.required"),
  i18nMustbenum = i18n.t("office.menu.mustbenum"),
  i18nName2 = i18n.t("office.menu.name2"),
  i18nSortOrder = i18n.t("office.menu.sortorder"),
  i18nPrice = i18n.t("office.menu.price"),
  i18nPoint = i18n.t("office.menu.point"),
  i18nReward = i18n.t("office.menu.rewardpoints"),
  i18nLeastonevalue = i18n.t("office.menu.leastonevalue"),
  priceReg = /^([-+]?[0-9]+)(\.[0-9]{1,2})?$/;
class OfficeMenu extends Component {
  constructor(props){
    super(props);
    this.state = {
      index:0,
      routes:[{
        key:"product",
      },{
        key:"categeries",
      }],
      checked:true,
      popScale:new Animated.Value(0),
      categoryPop:new Animated.Value(0),
      optionPop:new Animated.Value(0),
      leftAmimate:new Animated.Value(0),
      step:0
    }
  }
  componentWillMount(){
    let {getProductList,loadcategorylist} = this.props;
    getProductList();
    loadcategorylist();
  }
  render() {
    let {index,checked,popScale,categoryPop,optionPop,leftAmimate,step} = this.state;
    let {showCategory,productCategorys,categoryIndex,loading,categoryPicker,showProduct,productOption,productOptionValue} = this.props.menu;
    let {categoryInput,savaCategory,menu,productInput,inputProductOption,inputProductOptionValue,saveProduct} = this.props;
    return (
      <View style={styles.container}>
        <View style = {styles.productView}>
          <View style = {styles.productControl}>
            <TouchableOpacity 
              activeOpacity = {0.8}
              onPressIn = {()=>this.back()}
              style = {styles.backView}>
              <Image style = {styles.backIcon} source = {require("../../../access/imgs/back_icon.png")} />
              <FontText style = {styles.backText} font = {'book'}>{i18n.t("btns.back")}</FontText>
            </TouchableOpacity>
            <View style = {styles.btns}>
              <View style = {{flex:1,justifyContent:"center"}}>
                <RadioGroup 
                  selectIndex = {index} 
                  valuChange = {(index)=>this.onRadioChange(index)}
                  radios = {[i18n.t("office.menu.products"),i18n.t("office.menu.categories")]} />
              </View>
            </View>
            <View style = {styles.refreshView}>
              <TouchableOpacity
                style = {styles.refreshBtn}
                activeOpacity = {0.8}
                >
                <Image style = {styles.fillterIcon} source = {require("../../../access/imgs/oder_filter_icon.png")} />
              </TouchableOpacity>
              <TouchableOpacity
                style = {styles.refreshBtn}
                activeOpacity = {0.8}
                onPressIn = {()=>this.showProductOrCategory()}
                >
                <Image style = {styles.addIcon} source = {require("../../../access/imgs/add_icon_white.png")} />
              </TouchableOpacity>
              <TouchableOpacity
                style = {styles.refreshBtn}
                activeOpacity = {0.8}
                >
                <Image style = {styles.refreshIcon} source = {require("../../../access/imgs/refresh.png")} />
              </TouchableOpacity>
            </View>
          </View>
          <View style = {styles.registerPanne}>
            <View style = {{flex:1}}>
              <TabView
                navigationState = {this.state}
                onIndexChange={(e)=>this.onIndexChange(e)}
                useNativeDriver = {true}
                renderScene = {(e)=>this.renderScene(e)} 
                renderTabBar = {()=>null}
                initialLayout={{ width: deviceWidth,height:deviceHeight }}
              />
              <View style = {styles.classify}>
                <ScrollView
                  horizontal = {true}
                  style = {{height:scaleSize(110)}}
                  showsHorizontalScrollIndicator={false} 
                  >
                  {
                    productCategorys.map((item,index)=>{
                      let classActive = categoryIndex == index ? true : false;
                      return (
                        <TouchableOpacity
                          activeOpacity = {0.8}
                          style = {[styles.classifyBtn,{backgroundColor:classActive?"#fd265d":"rgba(0,0,0,0)"}]}
                          key = {`eval_${index}`}
                          onPress = {()=>this.onClassifyPress(index)}
                          >
                          <FontText style = {[styles.classifyBtnText,{color:classActive?"#fff":"#000"}]}  font = {'book'}>{item.name}</FontText>
                        </TouchableOpacity>
                      )
                    })
                  }
                </ScrollView>
              </View>
            </View>
            <View style = {styles.tabBox}>
                <View
                  style = {styles.tapView}
                  >
                  <Image style = {styles.tapIcon} source = {require("../../../access/imgs/tap_icon.png")} />
                  <FontText style = {styles.tapText} font = {'book'}>{i18n.t("tips.edittips")}</FontText>
                  <FontText style = {styles.tapText} font = {'book'}>{i18n.t("tips.deletetips")}</FontText>
                </View>
            </View>
          </View>
        </View>
        <Animated.View
          style = {[styles.popView,{transform:[{scale:popScale}]}]}
          >
          <KeyboardAvoidingView behavior='padding' keyboardVerticalOffset = {50} style = {styles.popContainer}>
              <View style = {styles.popTitle}>
                <TouchableOpacity
                  style = {styles.popTitleBtn}
                  activeOpacity = {0.8}
                  onPressIn = {()=>!menu.productadding && this.cancelProduct()}
                  >
                  <FontText style = {styles.titleBtn} font = {'book'}>{step == 0?i18n.t("btns.cancel"):i18n.t("btns.back")}</FontText>
                </TouchableOpacity>
                <View>
                  {
                    menu.productadding?
                    <ActivityIndicator />
                    :<FontText style = {styles.titleText} font = {'medium'}>{[i18n.t("office.menu.newproduct"),i18n.t("office.menu.addoptions"),i18n.t("office.menu.addvalues")][step]}</FontText>
                  }
                </View>
                {
                  step == 0
                  ?<TouchableOpacity
                    style = {styles.popTitleBtn}
                    activeOpacity = {0.8}
                    onPress = {()=>!menu.productadding && saveProduct((isSave)=>this.onSaveCallBack(isSave))}
                    >
                    <FontText style = {styles.titleBtn} font = {'book'}>{i18n.t("btns.save")}</FontText>
                  </TouchableOpacity>
                  :<View style = {{width:scaleSize(122)}}></View>
                }
              </View>
              <Animated.View style = {[styles.lamiview,{transform:[{translateX:leftAmimate}]}]}>
                <View style = {[styles.noptionView,{padding:0}]}>
                  <ScrollView style = {styles.popBox}>
                  <View style ={styles.imgBox}>
                    <View style = {styles.imgView}>
                      <View style = {styles.popImgBox}>
                        {
                          this.renderProductImg()
                        }
                      </View>
                      <TouchableOpacity 
                        activeOpacity = {0.8}
                        onPress = {()=>this.selectProductImg()}
                        style = {styles.editTextBox}>
                        <FontText style = {styles.editText} font = {'book'}>{i18n.t("btns.edit")}</FontText>
                      </TouchableOpacity>
                    </View>
                    <View style = {[styles.inputView,{paddingLeft:scaleSize(30),flexDirection:"column"}]}>
                      <View style = {styles.inputRow}>
                        <Picker
                          data={categoryPicker}
                          cols = {1}
                          dismissText = {i18n.t("btns.dismissText")}
                          okText = {i18n.t("btns.okText")}
                          title = {i18n.t("office.menu.picktitle")}
                          onChange = {(vals)=>productInput("categories",vals)}
                          >
                          <PickerItem
                            key = {'index'}
                            style = {styles.categerySelect}
                            >
                            <FontText numColumns = {1} style = {styles.selectText} font = {'book'}>{this.getCategoryText()}</FontText>
                            <Image style = {styles.selectArrow} source = {require("../../../access/imgs/arrow_down.png")} />
                          </PickerItem>
                        </Picker>
                        <Switch 
                          checked = {showProduct.status == 1 ? true : false} 
                          onPress = {(nchecked)=>productInput("status",nchecked?1:0)} 
                          height = {scaleSize(30)} 
                          >
                          <FontText style = {styles.visibletext} font={'medium'}>{i18n.t("office.menu.visible")}</FontText>
                        </Switch>
                      </View>
                      <View style = {styles.inputNameBox}>
                        <InputItem 
                          style = {styles.inputName} 
                          valuChange = {val=>productInput("name",val)}
                          value = {showProduct.name} 
                          placeholder = {i18n.t("office.menu.placeholderName")} />
                      </View>
                      <View style = {styles.inputDescreptionBox}>
                        <InputItem multiline = {true} 
                          style = {styles.inputDescreption} 
                          value = {showProduct.description}
                          valuChange = {val=>productInput("description",val)}
                          placeholder = {i18n.t("office.menu.placeholderDescription")} />
                      </View>
                    </View>
                  </View>
                  <View style = {styles.priceBox}>
                    <FontText font = {'book'} height = {scaleSize(50)} style = {styles.priceTitle} >{i18n.t("office.menu.price")}</FontText>
                    <View style = {styles.inputView}>
                      <View style = {[styles.inputItem,styles.inputshow]}>
                        <FontText font = {'book'} style = {styles.inputLable}>{i18n.t("office.menu.price")}</FontText>
                        <InputItem  
                          placeholderTextColor = {"rgb(255,255,255)"}
                          value  = {showProduct.price} 
                          valuChange = {val=>productInput("price",val)}
                          style = {styles.inputText} placeholder = {"0.00"} />
                      </View>
                      <View style = {[styles.inputItem,styles.inputshow]}>
                        <FontText font = {'book'} style = {styles.inputLable}>{i18n.t("office.menu.specialprice")}</FontText>
                        <InputItem  
                          placeholderTextColor = {"rgb(255,255,255)"} 
                          value = {showProduct.special_price}
                          valuChange = {val=>productInput("special_price",val)}
                          style = {styles.inputText} />
                      </View>
                      <View style = {[styles.inputItem,styles.inputshow]}>
                        <FontText font = {'book'} style = {styles.inputLable}>{i18n.t("office.menu.qty")}</FontText>
                        <InputItem 
                          placeholderTextColor = {"rgb(255,255,255)"}
                          value = {showProduct.qty+""}
                          valuChange = {val => productInput("qty",val)} 
                          style = {styles.inputText} />
                      </View>
                    </View>
                  </View>
                  <View style = {styles.priceBox}>
                    <FontText font = {'book'} height = {scaleSize(50)} style = {styles.priceTitle} >{i18n.t("office.menu.placeholderName")}</FontText>
                    <View style = {styles.inputView}>
                      <View style = {[styles.inputItem,styles.inputInventory]}>
                        <FontText font = {'book'} style = {styles.inputLable}>{i18n.t("office.menu.name2")}</FontText>
                        <InputItem  
                          placeholderTextColor = {"rgb(255,255,255)"}
                          value  = {showProduct.name2} 
                          valuChange = {val=>productInput("name2",val)}
                          style = {styles.inputText} />
                      </View>
                      <View style = {[styles.inputItem,styles.inputInventory]}>
                        <FontText font = {'book'} style = {styles.inputLable}>{i18n.t("office.menu.sortorder")}</FontText>
                        <InputItem  
                          placeholderTextColor = {"rgb(255,255,255)"} 
                          value = {showProduct.sort_order+""}
                          valuChange = {val=>productInput("sort_order",val)}
                          style = {styles.inputText}  />
                      </View>
                    </View>
                  </View>
                  <View style = {styles.priceBox}>
                    <FontText font = {'book'} height = {scaleSize(50)} style = {styles.priceTitle} >{i18n.t("office.menu.rewardpoints")}</FontText>
                    <View style = {styles.inputView}>
                      <View style = {[styles.inputItem,styles.inputshow]}>
                        <FontText font = {'book'} style = {styles.inputLable}>{i18n.t("office.menu.reward")}</FontText>
                        <InputItem  
                          placeholderTextColor = {"rgb(255,255,255)"}
                          value  = {showProduct.points+""} 
                          valuChange = {val=>productInput("points",val)}
                          style = {styles.inputText} />
                      </View>
                    </View>
                  </View>
                  <View style = {styles.priceBox}>
                    <View style = {styles.addOptionView}>
                      <FontText font = {'book'} height = {scaleSize(50)} style = {styles.priceTitle} >{i18n.t("office.menu.options")}</FontText>
                      <TouchableOpacity
                        activeOpacity = {0.8}
                        style = {styles.addOptionBox}
                        onPress = {()=>this.addOption()}
                        >
                        <FontText font = {'book'} style = {styles.priceTitle} >{i18n.t("office.menu.addoption")}+</FontText>
                      </TouchableOpacity>
                    </View>                
                  </View>
                  <View style = {styles.optionBox}>
                    {
                      this.renderOptions()
                    }
                  </View>
                </ScrollView>
                </View>
                <View style = {styles.noptionView}>
                  <ScrollView>
                    <View style = {styles.optionItem}>
                      <FontText font = {'book'} style = {[styles.inputLable,styles.optionLable]}>{i18n.t("office.menu.placeholderName")}</FontText>
                      <View style = {styles.optionContent}>
                        <InputItem
                          placeholderTextColor = {"rgb(255,255,255)"}
                          value  = {productOption.name} 
                          valuChange = {val=>inputProductOption("name",val)}
                          style = {[styles.inputText,styles.optionInput]} />
                      </View>
                    </View>
                    <View style = {styles.optionItem}>
                      <FontText font = {'book'} style = {[styles.inputLable,styles.optionLable]}>{i18n.t("office.menu.required")}</FontText>
                      <View style = {styles.optionContent}>
                        <Switch 
                          checked = {productOption.required} 
                          onPress = {(nchecked)=>inputProductOption("required",nchecked)} 
                          height = {scaleSize(30)} 
                          >
                        </Switch>
                      </View>
                    </View>
                    <View style = {styles.optionItem}>
                      <FontText font = {'book'} style = {[styles.inputLable,styles.optionLable]}>{i18n.t("office.menu.sortorder")}</FontText>
                      <View style = {styles.optionContent}>
                        <InputItem
                          placeholderTextColor = {"rgb(255,255,255)"}
                          value  = {productOption.sort_order+""} 
                          valuChange = {val=>inputProductOption("sort_order",val)}
                          style = {[styles.inputText,styles.optionInput]} />
                      </View>
                    </View>
                    <View style = {styles.optionItem}>
                      <FontText font = {'book'} style = {[styles.inputLable,styles.optionLable]}>{i18n.t("office.menu.values")}</FontText>
                    </View>
                    <View style = {styles.optionValues}>
                        {
                          productOption.values.map((item,index)=>{
                            let isActive = productOption.default == item.id;
                            return (
                              <TouchableOpacity
                                activeOpacity = {0.8}
                                onPress = {()=>this.editValue(item)} 
                                style = {[styles.valueView,isActive?styles.valueViewActive:{}]}>
                                <FontText font = {'book'} numberOfLines = {1} style = {styles.valueText}>{item.name}</FontText>
                                <TouchableOpacity
                                  onPress = {()=>this.deleteValue(index)} 
                                  style = {styles.deleteValue}>
                                  <Image style = {[styles.deleteValueIcon,{marginRight:0}]} source = {require("../../../access/imgs/delete_w.png")} />
                                </TouchableOpacity>
                              </TouchableOpacity>
                            );
                          })
                        }
                    </View>
                    <View style = {styles.btnViews}>
                        <TouchableOpacity
                          activeOpacity = {0.8}
                          style = {styles.valueBtn}
                          onPress = {()=>this.submitOption()}
                          >
                          <FontText font = {'book'} numberOfLines = {1} style = {styles.valueText}>{i18n.t("btns.submit")}</FontText>
                        </TouchableOpacity>
                        <TouchableOpacity
                          activeOpacity = {0.8}
                          style = {styles.valueBtn}
                          onPress = {()=>this.addValues()}
                          >
                          <FontText font = {'book'} numberOfLines = {1} style = {styles.valueText}>{i18n.t("office.menu.addvalues")}</FontText>
                        </TouchableOpacity>
                    </View>
                  </ScrollView>
                </View>
                <View style = {styles.noptionView}>
                  <ScrollView>
                    <View style = {styles.optionItem}>
                      <FontText font = {'book'} style = {[styles.inputLable,styles.optionLable]}>{i18n.t("office.menu.placeholderName")}</FontText>
                      <View style = {styles.optionContent}>
                        <InputItem
                          placeholderTextColor = {"rgb(255,255,255)"}
                          value  = {productOptionValue.name} 
                          valuChange = {val=>inputProductOptionValue("name",val)}
                          style = {[styles.inputText,styles.optionInput]} />
                      </View>
                    </View>
                    <View style = {styles.optionItem}>
                      <FontText font = {'book'} style = {[styles.inputLable,styles.optionLable]}>{i18n.t("office.menu.sortorder")}</FontText>
                      <View style = {styles.optionContent}>
                        <InputItem
                          placeholderTextColor = {"rgb(255,255,255)"}
                          value  = {productOptionValue.sort_order+""} 
                          valuChange = {val=>inputProductOptionValue("sort_order",val)}
                          style = {[styles.inputText,styles.optionInput]} />
                      </View>
                    </View>
                    <View style = {styles.optionItem}>
                      <FontText font = {'book'} style = {[styles.inputLable,styles.optionLable]}>{i18n.t("office.menu.price")}</FontText>
                      <View style = {styles.optionContent}>
                        <InputItem
                          placeholderTextColor = {"rgb(255,255,255)"}
                          value  = {productOptionValue.price+""} 
                          valuChange = {val=>inputProductOptionValue("price",val)}
                          style = {[styles.inputText,styles.optionInput]} />
                      </View>
                    </View>
                    <View style = {styles.optionItem}>
                      <FontText font = {'book'} style = {[styles.inputLable,styles.optionLable]}>{i18n.t("office.menu.point")}</FontText>
                      <View style = {styles.optionContent}>
                        <InputItem
                          placeholderTextColor = {"rgb(255,255,255)"}
                          value  = {productOptionValue.points+""} 
                          valuChange = {val=>inputProductOptionValue("points",val)}
                          style = {[styles.inputText,styles.optionInput]} />
                      </View>
                    </View>
                    <View style = {styles.btnViews}>
                        <TouchableOpacity
                          activeOpacity = {0.8}
                          style = {styles.valueBtn}
                          onPress = {()=>this.submitValue()}
                          >
                          <FontText font = {'book'} numberOfLines = {1} style = {styles.valueText}>{i18n.t("btns.submit")}</FontText>
                        </TouchableOpacity>
                    </View>
                  </ScrollView>
                </View>
              </Animated.View>
            </KeyboardAvoidingView>
        </Animated.View>
      <Animated.View
          style = {[styles.popView,{transform:[{scale:categoryPop}]}]}
          >
          <KeyboardAvoidingView behavior='padding' keyboardVerticalOffset = {50} style = {styles.popContainer}>
              <View style = {styles.popTitle}>
                <TouchableOpacity
                  style = {styles.popTitleBtn}
                  activeOpacity = {0.8}
                  onPress = {()=>!menu.categoryadding && this.hidePop(categoryPop)}
                  >
                  <FontText style = {styles.titleBtn} font = {'book'}>{i18n.t("btns.cancel")}</FontText>
                </TouchableOpacity>
                <View style = {{flex:1,justifyContent:"center",alignItems:"center"}}>
                  {
                    menu.categoryadding
                    ?<ActivityIndicator color = {"#fff"} />
                    :<FontText style = {styles.titleText} font = {'medium'}>{i18n.t("office.menu.newcategory")}</FontText>
                  }
                </View>
                <TouchableOpacity
                  style = {styles.popTitleBtn}
                  onPress = {()=>{
                    savaCategory((success)=>{
                      success && this.hidePop(categoryPop);
                    });
                  }}
                  activeOpacity = {0.8}
                  >
                  <FontText style = {styles.titleBtn} font = {'book'}>{i18n.t("btns.save")}</FontText>
                </TouchableOpacity>
              </View>
              <ScrollView style = {styles.popBox}>
                <View style ={styles.imgBox}>
                  <View style = {styles.imgView}>
                    <View style = {styles.popImgBox}>
                      {
                        this.renderCategoryImg()
                      }
                    </View>
                    <TouchableOpacity 
                      activeOpacity = {0.8}
                      onPress = {()=>this.selectCategoryImg()}
                      style = {styles.editTextBox}>
                      <FontText style = {styles.editText} font = {'book'}>{i18n.t("btns.edit")}</FontText>
                    </TouchableOpacity>
                  </View>
                  <View style = {[styles.inputView,{paddingLeft:scaleSize(30),flexDirection:"column"}]}>
                    <View style = {styles.inputNameBox}>
                        <InputItem value = {showCategory.name} style = {styles.inputName} valuChange = {(val)=>categoryInput("name",val)} placeholder = {i18n.t("office.menu.placeholderName")} />
                    </View>
                    <View style = {styles.inputRow}>
                      <Switch 
                        checked = {showCategory.status} 
                        onPress = {(nchecked)=>categoryInput("status",nchecked?1:0)} 
                        height = {scaleSize(30)} 
                        >
                        <FontText style = {styles.visibletext} font={'medium'}>{i18n.t("office.menu.status")}</FontText>
                      </Switch>
                    </View>
                    <View style = {styles.inputDescreptionBox}>
                      <InputItem value = {showCategory.description} valuChange = {(val)=>categoryInput("description",val)} multiline = {true} style = {styles.inputDescreption} placeholder = {i18n.t("office.menu.placeholderDescription")} />
                    </View>
                  </View>
                </View>
                <View style = {styles.priceBox}>
                  <FontText font = {'book'} height = {scaleSize(50)} style = {styles.priceTitle} >{i18n.t("office.menu.name2")}</FontText>
                  <View style = {styles.inputNameBox}>
                      <InputItem value = {showCategory.name2} valuChange = {(val)=>categoryInput("name2",val)} style = {styles.inputName} placeholder = {i18n.t("office.menu.name2")} />
                  </View>
                </View>
                <View style = {styles.priceBox}>
                  <FontText font = {'book'} height = {scaleSize(50)} style = {styles.priceTitle} >{i18n.t("office.menu.sortorder")}</FontText>
                  <View style = {styles.inputNameBox}>
                      <InputItem keyboardType='numeric' value = {String(showCategory.sort_order)} valuChange = {(val)=>categoryInput("sort_order",val)} style = {styles.inputName} placeholder = {i18n.t("office.menu.sortorder")} />
                  </View>
                </View>
              </ScrollView>
          </KeyboardAvoidingView>
      </Animated.View>
      <AntActivityIndicator 
        toast
        text={i18n.t("tips.loading")}
        animating={loading}
      />
      </View>
    );
  }
  showPop(){
    let {index,popScale,categoryPop} = this.state;
    let popState = popScale;
    if(index == 1){
      popState = categoryPop;
    }
    Animated.timing(popState, {
        toValue: 1,
        duration:200,
        useNativeDriver: true,
    }).start();
  }
  changeOptionPop(off = true){
    Animated.timing(this.state.optionPop, {
        toValue: off?1:0,
        duration:200,
        useNativeDriver: true,
    }).start();
  }
  productProgress(step){
    this.setState({
      step:step
    },()=>{
      Animated.timing(this.state.leftAmimate, {
        toValue: -scaleSize(step * 1500),
        duration:200,
        useNativeDriver: true,
      }).start();
    })
  }
  cancelProduct(){
    let {step,popScale} = this.state;
    if(step == 0){
      Alert.alert(i18n.t("appName"),i18n.t("tips.confirmcanle"),[{text:"Cancel"},{
        text:"Ok",
        onPress:()=>{
          this.hidePop(popScale);
        }
      }])
    }else{
      this.productProgress(--step);
    }
  }
  submitOption(){
    let {menu,productInput,setDetaultOption} = this.props;
    let noption = Object.assign({},menu.productOption);
    let noptions = Array.from(menu.showProduct.options);
    
    if(noption.name == ""){
      return Toast.info(`${i18nName} ${i18nRequired}`,3,null,false);
    }
    if(!/^\d+$/.test(noption.sort_order)){
      return Toast.info(`${i18nSortOrder} ${i18nMustbenum}`,3,null,false);
    }
    if(!Array.isArray(noption.values) || noption.values.length < 1){
      return Toast.info(`${i18nLeastonevalue}`,3,null,false);
    }
    let exist = noptions.find(item=>item.name == noption.name);
    if(exist){
      exist = noption;
    }else{
      noptions.push(noption);
    }
    productInput("options",noptions);
    setDetaultOption();
    this.productProgress(0);
  }
  addValues(){
    this.productProgress(2);
  }
  onSaveCallBack(isSave){
    isSave && this.hidePop(this.state.popScale);
  }
  submitValue(){
    let {menu,inputProductOption,setDetaultOptionValue} = this.props;
    let nvalues = Array.from(menu.productOption.values) || [];
    let nvalue = Object.assign({},menu.productOptionValue);
    if(nvalue.name == ""){
      return Toast.info(`${i18nName} ${i18nRequired}`,3,null,false);
    }
    if(!/^\d+$/.test(nvalue.sort_order)){
      return Toast.info(`${i18nSortOrder} ${i18nMustbenum}`,3,null,false);
    }
    if(!priceReg.test(Number(nvalue.price)) || nvalue.price == 0){
      return Toast.info(`${i18nPrice} ${i18nMustbenum}`,3,null,false);
    }
    if(!priceReg.test(nvalue.points)){
      return Toast.info(`${i18nPoint} ${i18nMustbenum}`,3,null,false);
    }
    let exist = nvalues.find(item=>item.name == menu.productOptionValue.name);
    if(exist){
      exist = nvalue;
    }else{
      nvalues.push(nvalue)
    }
    inputProductOption("values",nvalues);
    setDetaultOptionValue();
    this.productProgress(1);
  }
  hidePop(pop){
    Animated.timing(pop, {
        toValue: 0,
        duration:200,
        useNativeDriver: true,
    }).start();
  }
  back(){
    this.props.navigation.goBack();
  }
  editOption(option){
    let {inputProductOption} = this.props;
    inputProductOption(option);
    this.productProgress(1);
  }
  addOption(){
    // let {setDefaultProductInfo} = this.props;
    // setDefaultProductInfo();
    this.productProgress(1);
  }
  deleteOption(index){
    let {menu,productInput} = this.props;
    Alert.alert(i18n.t("appName"),i18n.t("office.menu.deleteoption"),[{
      text:i18n.t("btns.cancel"),
      },{
      text:i18n.t("btns.okText"),
      onPress:()=>{
        let noptions = Array.from(menu.showProduct.options)
        noptions.splice(index,1);
        productInput("options",noptions);
      }
    }]);
  }
  deleteValue(index){
    let {menu,inputProductOption} = this.props;
    Alert.alert(i18n.t("appName"),i18n.t("office.menu.deletevalue"),[{
      text:i18n.t("btns.cancel"),
      },{
      text:i18n.t("btns.okText"),
      onPress:()=>{
        let nvalues = Array.from(menu.productOption.values)
        nvalues.splice(index,1);
        inputProductOption("values",nvalues);
      }
    }]);
  }
  editValue(Value){
    let {inputProductOptionValue} = this.props;
    inputProductOptionValue(Value);
    this.productProgress(2);
  }
  renderOptions(){
    let {showProduct} = this.props.menu;
    if(Array.isArray(showProduct.options)){
      return showProduct.options.map((item,index)=>{
        return (
          <View key = {`eval_${index}`} style = {styles.optionView}>
            <View style = {styles.optionTitle}>
              <FontText font = {'book'} style = {styles.optionName}>{item.name}</FontText>
              <TouchableOpacity
                onPress = {()=>this.deleteOption(index)} 
                style = {styles.deleteValue}>
                <Image style = {styles.deleteValueIcon} source = {require("../../../access/imgs/delete_w.png")} />
              </TouchableOpacity>
            </View>
            <View style = {styles.optionsView}>
              {
                Array.isArray(item.values) && item.values.map((itemv,indexv)=>{
                  let isDefalut = itemv.server_value_id == item.default_value_id;
                  return (
                    <TouchableOpacity 
                      key = {`eval_${index}_${indexv}`} 
                      onPress = {()=>this.editOption(item)}
                      style = {[styles.optionsBtn,isDefalut?styles.valueViewActive:{}]}>
                      <FontText font = {'book'} style = {styles.optionLable}>{itemv.name}</FontText>
                    </TouchableOpacity>
                  )
                })
              }
            </View>
          </View>
        )
      })
    }
    return null;
  }
  onRadioChange(index){
    this.setState({
      index:index
    })
  }
  onClassifyPress(index){
    let {changeProductCategory} = this.props;
    this.setState({
      index:0
    })
    changeProductCategory(index);
  }
  renderRstyle(index){
    if(index == 4){
      return {
        width:scaleSize(250)
      }
    }
  }
  getCategoryText(){
    let {menu,} = this.props;
    let {showProduct,productCategorys} = menu;
    if(Array.isArray(showProduct.categories) && showProduct.categories.length > 0){
      let showItem = productCategorys.find(item=>{
        if(showProduct.categories[0]==item.server_category_id){
          return item;
        }
      });
      if(showItem){
        return showItem.name;
      }
    }
    return "Category";
  }
  onIndexChange(index){
    this.setState({
      index:index
    })
  }
  renderCategoryImg(){
    let {showCategory} = this.props.menu;
    let img = <FontText font = {'book'} style = {[styles.name,{color:"#fff"}]}>{i18n.t("tips.noimg")}</FontText>;
    if(showCategory.path){
      img = <Image style = {styles.editImg} source = {{uri:`file://${showCategory.path.path}`}} />
    }else if(showCategory.image){
      img = <CachedImage style = {styles.editImg} source = {{uri:`${showCategory.image}?v=${showCategory.version}`}}/>
    }
    return img;
  }
  renderProductImg(){
    let {showProduct} = this.props.menu;
    let source = _.get(showProduct,"images[0].url","");
    let img = <FontText font = {'book'} style = {[styles.name,{color:"#fff"}]}>{i18n.t("tips.noimg")}</FontText>;
    if(showProduct.path){
      img = <Image style = {styles.editImg} source = {{uri:`file://${showProduct.path.path}`}} />
    }else if(source){
      img = <CachedImage style = {styles.editImg} source = {{uri:`${source}?v=${showProduct.version}`}}/>
    }
    return img;
  }
  addProduct(){
    this.showProductOrCategory();
  }
  showProductOrCategory(){
    let {setDefaultProductInfo,setDefaultCotegory} = this.props;
    setDefaultProductInfo();
    setDefaultCotegory();
    this.showPop();
  }
  renderProductItem(item,index){
    let {menu,deleteProduct,setProductInfo} = this.props
    if(index == menu.pruductlist.length - 1){
      return (
        <TouchableOpacity
          activeOpacity = {0.8}
          onPress = {()=>this.addProduct()}
          style = {styles.addView}>
          <Image style = {styles.addIcon} source = {require("../../../access/imgs/add_icon.png")} />
          <FontText style = {styles.addText} font={'medium'}>{i18n.t("office.menu.addproduct")}</FontText>
        </TouchableOpacity>
      )
    }
    return (
      <View style = {styles.productItem}>
        <ProductItem
          {...item}
          onLongPress = {()=>deleteProduct(item,index)}
          onPress = {()=>{
            setProductInfo(item);
            this.showPop();
          }}
          index = {index} />
      </View>
    )
  }
  selectCategoryImg(){
    let {categoryInput,showToast} = this.props;
    this.onPickImg()
    .then(res=>{
      categoryInput("path",{
        path:res.path,
        image:`data:${res.mime};base64,${res.data}`
      });
    })
    .catch((e)=>{
      console.log(e);
      showToast(i18n.t("tips.selectimgcancel"))
    })
  }
  selectProductImg(){
    let {productInput,showToast} = this.props;
    this.onPickImg()
    .then(res=>{
      productInput("path",{
        path:res.path,
        image:`data:${res.mime};base64,${res.data}`
      });
    })
    .catch((e)=>{
      console.log(e);
      showToast(i18n.t("tips.selectimgcancel"))
    })
  }
  onPickImg(){
    let {changeLoading} = this.props;
    changeLoading(true);
    return ImagePicker.openPicker({
      compressImageMaxWidth: 640,
      compressImageMaxHeight: 640,
      cropping: true,
      mediaType:"photo",
      includeBase64:true,
      compressImageQuality:0.8
    })
    .then(d=>{
      changeLoading(false);
      return d;
    })
    .catch(e=>{
      changeLoading(false);
      return e;
    })
  }
  renderScene(e){
    let {key} = e.route;
    let {menu,loadcategorylist,getProductList} = this.props;
    switch (key) {
      case "product":
        return (
          <View style = {styles.swiperBox}>
            <FlatList 
              data = {menu.pruductlist}
              numColumns = {4}
              refreshing = {menu.productload}
              extraData = {menu.productload}
              onRefresh = {()=>getProductList(true)}
              keyExtractor = {(item,index)=>`eval_${item.server_category_id}_${item.version}`}
              columnWrapperStyle = {styles.pruducWrap}
              initialNumToRender = {20}
              renderItem={({item,index})=>this.renderProductItem(item,index)}
              ListEmptyComponent = {()=>{
                if(menu.productload){
                  return <View style = {styles.emtypView}>
                    <ActivityIndicator color = {"#fff"} />
                  </View>
                }else{
                  return (
                    <View style = {styles.emtypView}>
                      <FontText style = {styles.emptyText} font = {'book'}>{i18n.t("office.menu.noproduct")}</FontText>
                    </View>
                  )
                }
              }}
            />
          </View>
        )
      break;
      case "categeries":
        return (
          <View style = {styles.swiperBox}>
            <FlatList 
              data = {menu.categorylist}
              numColumns = {4}
              refreshing = {menu.categoryload}
              onRefresh = {()=>loadcategorylist(true)}
              contentContainerStyle = {{paddingHorizontal:scaleSize(30),flexWrap:"nowrap",justifyContent:"center"}}
              keyExtractor = {(item,index)=>`eval_${index}`}
              ListEmptyComponent = {()=>{
                if(menu.categoryload){
                  return <View style = {styles.emtypView}>
                    <ActivityIndicator color = {"#fff"} />
                  </View>
                }else{
                  return (
                    <View style = {styles.emtypView}>
                      <FontText style = {styles.emptyText} font = {'book'}>{i18n.t("office.menu.nocatygory")}</FontText>
                    </View>
                  )
                }
              }}
              renderItem = {({item})=>{
                return (
                  <View style = {styles.categeryItem}>
                    <CategeryItem onLongPress = {()=>this.deleteCategory(item)} onPress = {()=>this.editCategory(item)}  {...item} />
                  </View>
                )
              }}
            />
          </View>
        )
      break;
      case "tags":
        // return (
        //     <View style = {[styles.swiperBox,styles.categertBox]}>
        //     {
        //       testCategerys.map((item,index)=>{
        //         return (
        //           <View style = {styles.categeryItem} key = {`eval_${index}`}>
        //             <CategeryItem {...item} />
        //           </View>
        //         )
        //       })
        //     }
        //   </View>
        // )
      break;
      case "discounts":
        return (
          <View style = {styles.swiperBox}>
          <Text style = {{color:"#fff"}}>discounts</Text>
          </View>
        )
      break;
      case "universaloptions":
      return (
        <View style = {styles.swiperBox}>
        <Text style = {{color:"#fff"}}>universaloptions</Text>
        </View>
      )
      break;
      default:
        break;
    }
  }
  editCategory(item){
    let {setCategoryInfo} = this.props;
    let {categoryPop} = this.state;
    setCategoryInfo(item);
    this.showPop(categoryPop);
  }
  deleteCategory(item){
    let {deleteCategory} = this.props;
    Alert.alert(i18n.t("appName"),i18n.t("office.menu.deletecategory"),[{
      text:i18n.t("btns.cancel"),
    },{
      text:i18n.t("btns.okText"),
      onPress:()=>{
        deleteCategory(item);
      }
    }])
  }
}
export default connect(
  state => ({
    menu: state.menu
  }),
  dispatch => bindActionCreators(menuActions, dispatch)
)(OfficeMenu);
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    width:deviceWidth,
    flexDirection: 'row',
  },
  popView:{
    position: 'absolute',
    left:0,
    bottom:0,
    right:0,
    top:0,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: "rgba(0,0,0,0.2)",
  },
  popContainer:{
    flex: 1,
    width:scaleSize(1500),
    backgroundColor: "#0f162a",
    overflow:"hidden"
  },
  lamiview:{
    width:scaleSize(3000),
    flexDirection:"row",
    flex:1
  },
  popTitle:{
    backgroundColor: "#232b40",
    height:scaleSize(80),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: scaleSize(30),
  },
  titleText:{
    color:"#fff",
    fontSize: scaleSize(30),
  },
  popTitleBtn:{
    paddingHorizontal: scaleSize(30),
  },
  titleBtn:{
    color:"#fd265d",
    fontSize: scaleSize(30)
  },
  popBox:{
    flex: 1,
    paddingHorizontal:scaleSize(60),
    marginTop:scaleSize(60)
  },
  imgBox:{
    height:scaleSize(370),
    flexDirection: 'row'
  },
  imgView:{
    width:scaleSize(300)
  },
  popImgBox:{
    height:scaleSize(300),
    justifyContent:"center",
    alignItems:"center",
    borderColor:"#232b40",
    borderWidth:1
  },
  editImg:{
    width:scaleSize(300),
    height:scaleSize(300)
  },
  editTextBox:{
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    backgroundColor: "#232b40",
  },
  editText:{
    color:"#fff",
    fontSize: scaleSize(28),
  },
  noptionView:{
    padding:scaleSize(60),
    width:scaleSize(1500),
    overflow:"hidden"
  },
  btnViews:{
    height:scaleSize(100),
    flexDirection:"row",
    alignItems:"center",
    marginTop:scaleSize(30),
    paddingLeft:scaleSize(230)
  },
  valueBtn:{
    paddingHorizontal:scaleSize(30),
    paddingVertical:scaleSize(18),
    backgroundColor:"#232b40",
    alignItems:"center",
    justifyContent:"center",
    borderRadius:2,
    marginRight:scaleSize(30),
  },
  optionItem:{
    flexDirection:"row",
    height:scaleSize(80),
    marginBottom:scaleSize(20),
    alignItems:"center"
  },
  optionValues:{
    flexDirection:"row",
    flexWrap:"wrap"
  },
  valueView:{
    paddingHorizontal:scaleSize(30),
    paddingVertical:scaleSize(18),
    backgroundColor:"#cfa972",
    marginRight:scaleSize(30),
    borderRadius:scaleSize(9),
    marginTop:scaleSize(18),
    justifyContent:"center",
    alignItems:"center",
    flexDirection:"row"
  },
  valueText:{
    color:"#fff",
    fontSize:scaleSize(32)
  },
  valueViewActive:{
    backgroundColor:"#fd265d"
  },
  optionInput:{
    backgroundColor: "#394158",
    flex:1,
    paddingHorizontal:scaleSize(9)
  },
  optionLable:{
    width:scaleSize(200)
  },
  optionContent:{
    paddingLeft:scaleSize(30),
    width:scaleSize(800),
  },
  inputView:{
    flex:1,
    justifyContent: 'space-between',
    flexDirection: 'row'
  },
  inputItem:{
    backgroundColor: "#394158",
    paddingHorizontal: scaleSize(18),
    height:scaleSize(60),
    flexDirection: 'row'
  },
  inputoption:{
    width:scaleSize(1000)
  },
  inputshow:{
    width:scaleSize(440)
  },
  inputInventory:{
    width:scaleSize(680)
  },
  inputLable:{
    color:"#9b9b9b",
    fontSize: scaleSize(28),
    width:scaleSize(200)
  },
  inputText:{
    color:"#ffffff",
    justifyContent: 'flex-end',
    textAlign:"right",
  },
  inputRow:{
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  inputQty:{
    flexDirection: 'row',
    alignItems: 'center',
  },
  categerySelect:{
    width:scaleSize(480),
    height:scaleSize(60),
    borderWidth: 1,
    borderColor: "#fff",
    justifyContent: 'center',
    paddingHorizontal: scaleSize(30),
  },
  selectText:{
    color:"#fff",
    fontSize: scaleSize(28),
  },
  selectArrow:{
    position: 'absolute',
    right:scaleSize(9),
    width:scaleSize(23),
    height:scaleSize(14)
  },
  visibletext:{
    color:"#fff",
    fontSize: scaleSize(30),
    paddingLeft: scaleSize(18),
  },
  inputNameBox:{
    backgroundColor: "#394158",
    height:scaleSize(60),
    paddingHorizontal: scaleSize(30),
    justifyContent: 'center',
  },
  inputName:{
    fontSize: scaleSize(28),
    color:"#9b9b9b"
  },
  inputDescreptionBox:{
    height:scaleSize(184),
    backgroundColor: "#394158",
    paddingHorizontal: scaleSize(30),
  },
  priceBox:{
    marginTop: scaleSize(50),
  },
  priceTitle:{
    color:"#fff",
    fontSize: scaleSize(30),
  },
  inputDescreption:{
    flex:1,
    color:"#9b9b9b"
  },
  trackqtySelect:{
    width:scaleSize(440),
    marginLeft: scaleSize(30),
    height:scaleSize(60),
    borderWidth: 1,
    borderColor: "#fff",
    justifyContent: 'center',
    paddingHorizontal: scaleSize(30),
  },
  productView:{
    backgroundColor: "#090d17",
    flex:1
  },
  addOptionView:{
    flexDirection: 'row',
    alignItems: 'center',
  },
  addOptionBox:{
    height:scaleSize(50),
    width:scaleSize(300),
    backgroundColor: "#cfa972",
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: scaleSize(5),
    marginLeft: scaleSize(30),
  },
  optionBox:{
    marginTop:scaleSize(30)
  },
  optionTitle:{
    flexDirection:"row",
    height:scaleSize(80),
    alignItems:"center"
  },
  optionName:{
    color:"#fff",
    fontSize:scaleSize(30),
    color:"#909090",
  },
  optionsView:{
    flexDirection:"row",
    flexWrap:"wrap"
  },
  optionsBtn:{
    backgroundColor:"#cfa972",
    borderRadius:4,
    marginRight:scaleSize(18),
    alignItems:"center",
    justifyContent:"center",
    marginBottom:scaleSize(18),
    flexDirection:"row",
    height:scaleSize(60),
    alignItems:"center",
    paddingHorizontal:scaleSize(18)
  },
  deleteValue:{

  },
  deleteValueIcon:{
    width:scaleSize(40),
    height:scaleSize(40),
    marginHorizontal:scaleSize(30)
  },
  valueNumbers:{
    position:"absolute",
    right:scaleSize(-18),
    top:scaleSize(-18),
    backgroundColor: "#fd265d",
    width:scaleSize(48),
    height:scaleSize(48),
    borderRadius:scaleSize(48),
    justifyContent:"center",
    alignItems:"center"
  },
  valueNumberText:{
    fontSize:scaleSize(22)
  },
  optionLable:{
    color:"#fff"
  },
  productControl:{
    height:scaleSize(80),
    flexDirection: 'row',
    paddingHorizontal: scaleSize(30),
    alignItems: 'center',
    backgroundColor: "#151c2e",
  },
  backView:{
    flexDirection: 'row',
    alignItems: 'center',
    paddingRight: scaleSize(50),
  },
  backIcon:{
    width:scaleSize(17),
    height:scaleSize(30)
  },
  backText:{
    color:"#fff",
    paddingHorizontal: scaleSize(30),
  },
  btns:{
    width:scaleSize(1480),
    alignItems: 'center',
  },
  registerPanne:{
    flex:1,
    flexDirection: 'row',
  },
  classify:{
    height:scaleSize(110),
    backgroundColor: "#d2d2d2",
    flexDirection: 'row',
  },
  classifyBtn:{
    paddingHorizontal: scaleSize(80),
    justifyContent: 'center',
    alignItems: 'center',
  },
  menu:{
    width:scaleSize(550),
    backgroundColor: "#151c2e",
  },
  orderBox:{
    height:scaleSize(250),
    backgroundColor: "#232b40",
    paddingHorizontal: scaleSize(18),
  },
  pruducWrap:{
    flexDirection: 'row',
    paddingHorizontal: scaleSize(30),
    alignItems: 'center',
  },
  productItem:{
    width:scaleSize(344),
    marginBottom: scaleSize(20),
    marginRight: scaleSize(16),
  },
  addView:{
    height:scaleSize(344),
    width:scaleSize(344),
    justifyContent: 'center',
    alignItems: 'center'
  },
  addIcon:{
    width:scaleSize(50),
    height:scaleSize(50)
  },
  addText:{
    fontSize: scaleSize(27),
    color:"#cfa972",
    marginTop: scaleSize(30),
  },
  orderType:{
    height:scaleSize(100),
    justifyContent: 'center',
  },
  ordetTypeText:{
    fontSize: scaleSize(20),
    color:"#9b9b9b"
  },
  typeBtn:{
    height:scaleSize(50),
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: scaleSize(9),
  },
  btn:{
    width:scaleSize(160),
    borderColor: "#9b9b9b",
    borderWidth: 1,
    borderRadius: scaleSize(5),
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnText:{
    color:"#9b9b9b",
    fontSize: scaleSize(20),
  },
  tableInfo:{
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: scaleSize(9),
  },
  info:{
    height:scaleSize(60),
    width:scaleSize(250),
    backgroundColor: "#394158",
    paddingLeft: scaleSize(18),
    justifyContent: 'center',
  },
  infoType:{
    color:"#ffffff",
    fontSize: scaleSize(28),
  },
  noteSort:{
    flex:1,
    flexDirection: 'row',
  },
  sortBox:{
    flex:1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  sortText:{
    color:"#9b9b9b",
    fontSize: scaleSize(27),
    paddingLeft: scaleSize(18)
  },
  noteBox:{
    flex:1,
    alignItems: 'center',
    justifyContent: 'flex-end',
    flexDirection: 'row',
  },
  noteIcon:{
    width:scaleSize(30),
    height:scaleSize(40)
  },
  noteText:{
    color:"#fd265d",
    fontSize: scaleSize(27),
    paddingLeft: scaleSize(18)
  },
  sortIcon:{
    width:scaleSize(23),
    height:scaleSize(14)
  },
  saleControl:{
    height:scaleSize(300),
    justifyContent: 'space-between',
  },
  saleBtn:{
    height:scaleSize(126),
    margin: scaleSize(30),
    backgroundColor: "#fd265d",
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: scaleSize(10),
  },
  saleBtnText:{
    color:"#fff",
    fontSize: scaleSize(42),
  },
  saleBtns:{
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: "#232b40",
    paddingHorizontal: scaleSize(30),
    height:scaleSize(110)
  },
  cbtn:{
    width:scaleSize(120),
    justifyContent: 'center',
    alignItems: 'center',
  },
  printeIcon:{
    width:scaleSize(40),
    height:scaleSize(40)
  },
  emailIcon:{
    width:scaleSize(40),
    height:scaleSize(29)
  },
  deleteIcon:{
    width:scaleSize(37),
    height:scaleSize(40)
  },
  cbtnText:{
    color:"#cfa972",
    fontSize: scaleSize(27),
    marginTop: scaleSize(9),
  },
  swiperBox:{
    flex:1,
    paddingTop: scaleSize(10),
  },
  emtypView:{
    justifyContent:"center",
    alignItems:"center",
    height:deviceHeight - 100
  },
  emptyText:{
    color:"#909090",
    fontSize:scaleSize(50)
  }, 
  categertBox:{
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingLeft: scaleSize(31),
  },
  categeryItem:{
    marginBottom: scaleSize(20),
    marginRight:scaleSize(22)
  },
  tabBox:{
    width:scaleSize(560),
    backgroundColor: "#151c2e",
  },
  tapView:{
    height:scaleSize(500),
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  tapIcon:{
    width:scaleSize(150),
    height:scaleSize(150),
    marginBottom:scaleSize(80)
  },
  tapText:{
    color:"#9b9b9b",
    fontSize: scaleSize(30),
    lineHeight:scaleSize(50)
  },
  refreshView:{
    justifyContent: 'flex-end',
    alignItems: 'center',
    flexDirection: 'row',
    width:scaleSize(280),
    flex:1
  },
  refreshBtn:{
    paddingLeft: scaleSize(50),
  },
  refreshIcon:{
    width:scaleSize(23),
    height:scaleSize(26)
  },
  fillterIcon:{
    width:scaleSize(29),
    height:scaleSize(26)
  },
  addIcon:{
    width:scaleSize(26),
    height:scaleSize(26)
  }
});
